<template>
  <div id="schedule_s">
    <!--header-->
    <sticky>
      <x-header :left-options="{backText: ''}">排班安排</x-header>
    </sticky>

    <div class="hp-search">
      <input class="hp-search-input" placeholder="请输入姓名搜索" v-model="searchName">
      <x-icon type="ios-search-strong" size="26" class="hp-search-icon"></x-icon>
    </div>

    <div style="width: 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;">
      <tab v-model="tabValue" style="width:500px;" :line-width="0">
        <tab-item>全部</tab-item>
        <tab-item v-for="item of tabList.slice(0, -1)">{{item.display_name}}</tab-item>
      </tab>
    </div>

    <!--scroller-->
    <scroller lock-x height="-230px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom">

      <checklist ref="resultRef" :options="resultList" v-model="test"></checklist>

      <!--load-more-->
      <load-more v-show="loadMoreShow" tip="使劲加载中……"></load-more>
    </scroller>

    <div class="box">
      <flexbox>
        <flexbox-item>
          <x-button v-if="canSelectAll" @click.native="selectAll">全选</x-button>
          <x-button v-else @click.native="selectAll">取消全选</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary" @click.native="doSubmit">排班</x-button>
        </flexbox-item>
      </flexbox>
    </div>


    <div v-transfer-dom>
      <popup v-model="popUpShow" style="background: #fff">
        <div>
          <group title="角色">
            <div class="box">
              <checker v-model="roleCheckBox" type="checkbox" default-item-class="role-item"
                       selected-item-class="role-item-selected">
                <checker-item :value="item.value" v-for="item of checkList" style="margin: 3px">
                  {{item.label}}
                </checker-item>
              </checker>
            </div>
          </group>
          <group title="个人信息">
            <datetime v-model="startTime" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']"
                      @on-change="onChange" title="开始时间"></datetime>
            <datetime v-model="endTime" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']"
                      @on-change="onChange" title="结束时间"></datetime>
            <x-switch title="仅工作日" v-model="workDay"></x-switch>
            <x-textarea :max="100" name="msg" placeholder="填写备注" v-model="msg"></x-textarea>
          </group>
          <div class="box">
            <x-button type="primary" @click.native="doPost">排班</x-button>
          </div>
        </div>
      </popup>
    </div>

  </div>
</template>

<script>
  import {
    TransferDom,
    Popup,
    XHeader,
    Tab,
    TabItem,
    Sticky,
    Scroller,
    LoadMore,
    Panel,
    Checker,
    CheckerItem,
    XInput,
    Group,
    XSwitch,
    XButton,
    Checklist,
    Flexbox,
    FlexboxItem,
    Datetime,
    XTextarea
  } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Popup,
      XHeader,
      Tab,
      TabItem,
      Sticky,
      Scroller,
      LoadMore,
      Panel,
      Checker,
      CheckerItem,
      XInput,
      Group,
      XSwitch,
      XButton,
      Checklist,
      Flexbox,
      FlexboxItem,
      Datetime,
      XTextarea
    },
    data() {
      return {
        tabValue: 0,
        searchName: null,
        tabList: [],
        loadMoreShow: true,
        resultList: [],
        allList: [],
        roleName: null,
        page: 1,
        onFetching: false,
        popUpShow: false,
        roleCheckBox: [],
        role: {
          name: '',
          phone: '',
          position: ''
        },
        checkList: [],
        test: [], // 解决checkList显示bug
        startTime: '',
        endTime: '',
        workDay: true,
        msg: '',
        canSelectAll: true
      }
    },
    mounted() {
      this.$http.get('/api/user/roles').then((r) => {
        this.tabList = r.data.data
      })
      this.loadList()
    },
    methods: {
      loadList() {
        this.$http.get('/api/users', {
          params: {
            page: this.page,
            search: this.searchName || null,
            role_name: this.roleName || null
          }
        }).then((r) => {
          if (r.data.page.total <= r.data.page.limit) {
            this.loadMoreShow = false
            this.onFetching = true
          }
          r.data.data.forEach((item) => {
            this.resultList.push({key: item.id, value: item.name})
          })
          this.allList = this.allList.concat(r.data.data)
        })
      },
      onScrollBottom() {
        if (!this.onFetching) {
          this.onFetching = true
          this.page++
          // 获取人员列表
          this.$http.get('/api/users', {
            params: {
              page: this.page,
              search: this.searchName || null,
              role_name: this.roleName || null
            }
          }).then((r) => {
            if (r.data.page.page > r.data.page.count) {
              this.loadMoreShow = false
            } else {
              r.data.data.forEach((item) => {
                this.resultList.push({key: item.id, value: item.name})
              })
              this.allList = this.allList.concat(r.data.data)
              this.onFetching = false
            }
          })
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
        }
      },
      doSubmit() {
        this.checkList = this.$refs.resultRef.getFullValue()
        this.roleCheckBox = this.test
        if (this.roleCheckBox.length) {
          this.popUpShow = true
        } else {
          this.$vux.toast.text('请至少选择一人')
        }
      },
      selectAll() {
        if (this.canSelectAll) {
          let temp = []
          this.resultList.forEach((item) => {
            temp.push(item.key)
          })
          this.test = temp
        } else {
          this.test = []
        }
        this.canSelectAll = !this.canSelectAll
      },
      onChange() {
      },
      doPost() {
        let canPost = true
        if (!this.roleCheckBox.length) {
          this.$vux.toast.text('请至少选择一人')
          canPost = false
        } else if (!this.startTime) {
          this.$vux.toast.text('请选择开始时间')
          canPost = false
        } else if (!this.endTime) {
          this.$vux.toast.text('请选择结束时间')
          canPost = false
        }
        if (canPost) {
          this.$http.post('/api/onduty/post', {
            user_id: this.roleCheckBox,
            start_at: this.startTime.split(' ')[0] || null,
            end_at: this.endTime.split(' ')[0] || null,
            start_time: this.startTime.split(' ')[1] || null,
            end_time: this.endTime.split(' ')[1] || null,
            workday: this.workDay,
            remark: this.msg
          }).then(() => {
            this.popUpShow = false
            this.$vux.toast.text('排班成功')
          })
        }
      }
    },
    watch: {
      tabValue() {
        this.$vux.loading.show({
          text: 'loading'
        })
        let roleNameList = []

        this.tabList.forEach((item) => {
          roleNameList.push(item.name)
        })

        this.roleName = roleNameList[this.tabValue - 1]
        this.page = 1
        this.resultList = []
        this.allList = []
        this.loadList()
      },
      searchName() {
        this.page = 1
        this.resultList = []
        this.allList = []
        this.loadList()
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/theme.css';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .vux-slider .vux-swiper-item {
    background-color: #fff;
  }

  .tab-swiper {
    background-color: #fff;
  }

  .hp-search-input {
    display: block;
    margin: 1em auto;
    width: 80%;
    text-align: left;
    outline: none;
    height: 2em;
    padding-left: 10%;
  }

  .hp-search {
    position: relative;
  }

  .hp-search-icon {
    position: absolute;
    top: 2px;
    left: 5%;
    fill: #9c9faa;
  }

  .role-item {
    border: 1px solid #ececec;
    padding: 5px 15px;
    background: #fff;
  }

  .role-item-selected {
    border: 1px solid #0084ff;
  }

  .box {
    padding: 10px 15px;
  }

  #schedule_s {
    height: 100%;
    overflow: hidden;
  }
</style>
